<template>
  <div class="container" ref="containerRef"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import china from './china.json'
import { onMounted, ref } from 'vue'

// 注册地图
echarts.registerMap('china', china)

const containerRef = ref()

onMounted(() => {
  const myEcharts = echarts.init(containerRef.value)
  const option = {
    series: {
      type: 'map',
      map: 'china', // 使用 china 地图
      label: {
        show: true
      },
      data: [
        {
          name: '北京',
          value: 10000
        },
        {
          name: '广东',
          value: 1000
        },
        {
          name: '新疆',
          value: 10
        }
      ],
      zoom: 1.2
    },
    visualMap: {
      type: 'piecewise',
      pieces: [
        { gte: 1, lte: 9 },
        { gte: 10, lte: 99 },
        { gte: 100, lte: 999 },
        { gte: 1000, lte: 9999 },
        { gte: 10000 }
      ]
    }
  }
  myEcharts.setOption(option)
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
}
</style>
